<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/cart.css"/>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	</head>
	<body>
		<div class="top">
			<div class="userbox">
				聚美优品欢迎您，<a href="">登录 </a> | <a href=""> 免费注册</a>
			</div>
		</div>
		<!-- 头部 -->
		<div class="header">
			<div class="header-con">
				<a href=""><img src="img/cat/cart_logo.jpg" ></a>
				<div class="img"></div>
			</div>
		</div>
		<!-- 空购物车 -->
		<div class="none">
			<img src="img/cat/empty_icon.jpg" >
			<div class="none-r">
					<h2>您的购物车中没有商品，请先去挑选心爱的商品吧！</h2>
				<p> 您可以<a href="" class="btn">返回首页</a>挑选喜欢的商品,或者</p>
				<div class="span">
					<input type="" name="" id="" value="" placeholder="搜搜您想要的商品"/>
				<button type="button"></button>
				</div>
				
			</div>
		</div>
		<!-- 预购购物车 -->
		<div class="has">
			<div class="top">
				<i class="i1"></i>
				<span> 请在 <span class="span1">19分59秒</span> 内去结账，并在下单后 <span>20</span> 分钟内完成支付  </span>
				[<span class="span1">?</span>]
				<div class="top-r">
					<ul>
						<li><span><i></i> 真品防伪码 </span></li>
						<li><span><i class="i1"></i> 7天无条件退货 </span></li>
						<li><span><i class="i2"></i> 美妆满2件或299元包邮 </span></li>
					</ul>
				</div>
				<div class="text">
					<i>包邮</i> 第三方入驻商家单订单满159包邮 
				</div>
				<div id="content">
					<table>
						<thead>
							<tr><th class="t1"><input type="checkbox" checked="checked"/>名品特卖</th>
							<th>聚美价（元）</th>
							<th>数量</th>
							<th>小计（元）</th>
							<th>操作</th></tr>
						</thead>
					<tbody>
						<tr><td>
						<input type="checkbox" checked="checked">
						<div><a href=""></a>
						<p></p>
						<div></div></td></tr>
					</tbody>
					</table>
				</div>
			</div>
		</div>
		<!-- 受欢迎的商品 -->
		<div id="box">
			<div class="tip">
				<a href="" id="one">今日备受欢迎  </a>
				<i></i>
				<a href="" id="two">最近查看过  </a>
			</div>
			<div class="product">
				<ul class="one">
					<li>
					<a href="" class="a1"><img src="img/cat/4920928_160_160.jpg" ></a>
					<a href="" class="a2">
						<span>7折/</span>  OLAY玉兰油身体乳莹亮精华烟酰胺400ml小白瓶烟酰胺 
					</a>
					<div class="price"><span class="s1">¥139.0</span>
					<span class="s2">
						¥199.00
					</span></div>
					<button type="button">加入购物车</button>	
					</li>
					<li><a href="" class="a1"><img src="img/cat/5236238_160_160.jpg" ></a>
					<a href="" class="a2">
						<span>2折</span>   【拍1发10】健 美创研新款馥郁花果香滋养护手霜30g*10支香型随机发 
					</a>
					<div class="price"><span class="s1">¥13.8</span>
					<span class="s2">
						¥69.00
					</span></div>
					<button type="button">加入购物车</button>	</li>
				</ul>
				<ul class="two">
					<li>
					<a href="" class="a1"><img src="img/cat/5222788_160_160.jpg" ></a>
					<a href="" class="a2">
						<span>7折/</span>  OLAY玉兰油身体乳莹亮精华烟酰胺400ml小白瓶烟酰胺 
					</a>
					<div class="price"><span class="s1">¥139.0</span>
					<span class="s2">
						¥199.00
					</span></div>
					<button type="button">加入购物车</button>	
					</li>
					<li><a href="" class="a1"><img src="img/cat/5187760_160_160.jpg" ></a>
					<a href="" class="a2">
						<span>2折</span>   【拍1发10】健 美创研新款馥郁花果香滋养护手霜30g*10支香型随机发 
					</a>
					<div class="price"><span class="s1">¥13.8</span>
					<span class="s2">
						¥69.00
					</span></div>
					<button type="button">加入购物车</button>	</li>
					<li><a href="" class="a1"><img src="img/cat/5236238_160_160.jpg" ></a>
					<a href="" class="a2">
						<span>2折</span>   【拍1发10】健 美创研新款馥郁花果香滋养护手霜30g*10支香型随机发 
					</a>
					<div class="price"><span class="s1">¥13.8</span>
					<span class="s2">
						¥69.00
					</span></div>
					<button type="button">加入购物车</button>	</li>
					<li><a href="" class="a1"><img src="img/cat/5246976_160_160.jpg" ></a>
					<a href="" class="a2">
						<span>2折</span>   【拍1发10】健 美创研新款馥郁花果香滋养护手霜30g*10支香型随机发 
					</a>
					<div class="price"><span class="s1">¥13.8</span>
					<span class="s2">
						¥69.00
					</span></div>
					<button type="button">加入购物车</button>	</li>
					<li><a href="" class="a1"><img src="img/cat/5251696_160_160.jpg" ></a>
					<a href="" class="a2">
						<span>2折</span>   【拍1发10】健 美创研新款馥郁花果香滋养护手霜30g*10支香型随机发 
					</a>
					<div class="price"><span class="s1">¥13.8</span>
					<span class="s2">
						¥69.00
					</span></div>
					<button type="button">加入购物车</button>	</li>
					<li><a href="" class="a1"><img src="img/cat/5224054_160_160.jpg" ></a>
					<a href="" class="a2">
						<span>2折</span>   【拍1发10】健 美创研新款馥郁花果香滋养护手霜30g*10支香型随机发 
					</a>
					<div class="price"><span class="s1">¥13.8</span>
					<span class="s2">
						¥69.00
					</span></div>
					<button type="button">加入购物车</button>	</li>
					<li><a href="" class="a1"><img src="img/cat/4955018_160_160.jpg" ></a>
					<a href="" class="a2">
						<span>2折</span>   【拍1发10】健 美创研新款馥郁花果香滋养护手霜30g*10支香型随机发 
					</a>
					<div class="price"><span class="s1">¥13.8</span>
					<span class="s2">
						¥69.00
					</span></div>
					<button type="button">加入购物车</button>	</li><li><a href="" class="a1"><img src="img/cat/4878746_160_160%20(1).jpg" ></a>
					<a href="" class="a2">
						<span>2折</span>   【拍1发10】健 美创研新款馥郁花果香滋养护手霜30g*10支香型随机发 
					</a>
					<div class="price"><span class="s1">¥13.8</span>
					<span class="s2">
						¥69.00
					</span></div>
					<button type="button">加入购物车</button>	</li>
				</ul>
			</div>
		</div>
		<div id="footer">
			
		</div>
	</body>
</html>
<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$("#footer").load("login.html .footer");
	})
	let oA1= document.querySelector("#one");
	let oA2 = document.querySelector("#two");
	let oOne = document.querySelector(".one");
	let oTwo = document.querySelector(".two");
	oA2.onmouseover =function(){
		oTwo.style.display = "block";
		oOne.style.display = "none";
		this.style.borderBottom = " 2px solid #ed145b";
		oA1.style.border = "none";
	}
	oA1.onmouseover =function(){
		oOne.style.display = "block";
		oTwo.style.display = "none";
		this.style.borderBottom = " 2px solid #ed145b";
		oA2.style.border = "none";
	}
</script>
